<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<base href="${pageContext.request.contextPath}/">
	<link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link type="text/css" href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	<link type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>

	<!-- 创建客户的模态窗口 -->
	<div class="modal fade" id="createCustomerModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建客户</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control ownerSelect" id="create-owner">
								</select>
							</div>
							<label for="create-name" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-name">
							</div>
						</div>
						
						<div class="form-group">
                            <label for="create-website" class="col-sm-2 control-label">公司网站</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-website">
                            </div>
							<label for="create-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-phone">
							</div>
						</div>
						<div class="form-group">
							<label for="create-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

                        <div style="position: relative;top: 15px;">
                            <div class="form-group">
                                <label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
                                <div class="col-sm-10" style="width: 300px;">
                                    <input type="text" class="form-control" id="create-nextContactTime">
                                </div>
                            </div>
                        </div>

                        <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="create-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="create-address"></textarea>
                                </div>
                            </div>
                        </div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改客户的模态窗口 -->
	<div class="modal fade" id="editCustomerModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改客户</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="edit-owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control ownerSelect" id="edit-owner">
								</select>
							</div>
							<label for="edit-name" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-name" value="动力节点">
							</div>
						</div>
						
						<div class="form-group">
                            <label for="edit-website" class="col-sm-2 control-label">公司网站</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-website" value="http://www.bjpowernode.com">
                            </div>
							<label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-phone" value="010-84846003">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-description" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-description"></textarea>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

                        <div style="position: relative;top: 15px;">
                            <div class="form-group">
                                <label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="3" id="edit-contactSummary"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
                                <div class="col-sm-10" style="width: 300px;">
                                    <input type="text" class="form-control" id="edit-nextContactTime">
                                </div>
                            </div>
                        </div>

                        <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="edit-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="edit-address">北京大兴大族企业湾</textarea>
                                </div>
                            </div>
                        </div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="edit()">更新</button>
				</div>
			</div>
		</div>
	</div>




	<!--======================顶部导航栏==============================-->
	<ol class="breadcrumb">
		<li><a href="workbench/index" target="_parent">工作台</a></li>
		<li class="active">客户列表</li>
	</ol>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
			<%-- 查询 板块--%>
			<div class="btn-toolbar" role="toolbar" style="height: 50px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;" id="searchForm">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="name">
				    </div>
				  </div>

					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">所有者</div>
							<select class="form-control ownerSelect" id="owner">
							</select>
						</div>
					</div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司座机</div>
				      <input class="form-control" type="text" id="phone">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司网站</div>
				      <input class="form-control" type="text" id="website">
				    </div>
				  </div>
					<div class="form-group">
						<div class="input-group">
							<button type="button" class="btn btn-default" onclick="$('#tab').bootstrapTable('refresh');"><span
									class="glyphicon glyphicon-search"></span> 查询
							</button>
						</div>
						&emsp;&emsp;
						<div class="input-group">
							<button type="button" class="btn btn-default"
									onclick="$('#searchForm')[0].reset();$('#tab').bootstrapTable('refresh');"><span
									class="glyphicon glyphicon-refresh"></span> 清空
							</button>
						</div>
					</div>
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createCustomerModal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-danger" onclick="removeBatch()"><span class="glyphicon glyphicon-minus"></span> 批量删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table id="tab">
				</table>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
	<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js "></script>
	<script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript">
		$(function(){
			initTable();
			ownerSelect();
		});

		// 表格初始化
		function initTable() {
			//调用配置异步表格的方法
			$('#tab').bootstrapTable({
				//=========== 表格配置项===============
				// http 请求方式
				method: 'get',
				// 请求路径
				url: 'customer/page',
				// 点击选中
				clickToSelect: true,
				// 开启分页
				pagination: true,
				// 设置分页的位置 server 服务器端分页  local 前端分页
				sidePagination: 'server',
				// 设置每页条数
				pageSize: 5,
				// 设置每页条数列表
				pageList: [5, 10, 20, 50],
				paginationPreText: '上一页',
				paginationNextText: '下一页',
				// 查询时的参数
				queryParamsType: '',
				queryParams: function (params) {
					// 获取自定义的请求参数
					params.name = $('#name').val();
					params.owner = $('#owner').val();
					params.phone = $('#phone').val();
					params.website = $('#website').val();
					return params;
				},
				// 处理响应的格式
				responseHandler: function (res) {
					if (res.code == 0) {
						return {
							rows: res.data.list,
							total: res.data.total
						}
					}
				},
				// 表各种的列元素描述
				columns: [
					{
						//复选框
						checkbox: true
					}, {
						field: 'id',
						visible:false
					},{
						//列名
						title: '名称',
						field: 'name',
						halign: 'center',
						// 列数据初始化
						// formatter: function (value, row) {
						// 	// 格式化之后的列数据
						// 	return '<a href="clue/detail/'+ row.id +'">'+ value + row.appellation +' </a>';
						// }
					},{
						//列名
						title: '所有者',
						field: 'userName',
						halign: 'center'
					},{
						//列名
						title: '公司座机',
						field: 'phone',
						halign: 'center'
					}, {
						//列名
						title: '公司网站',
						field: 'website',
						halign: 'center'
					},{
						title: '操作',
						halign: 'center',
						formatter: function (value, row) {
							return '<button type="button" class="btn btn-warning btn-sm"  onclick="openEdit(\'' + row.id + '\')"><span class="glyphicon glyphicon-edit"></span> 编辑</button>' +
									'&emsp;' + '&emsp;' + '<button type="button" class="btn btn-danger btn-sm" onclick="remove(\'' + row.id + '\')"><span class="glyphicon glyphicon-remove"></span> 删除</button>';
						}
					}
				]
			});
		}


		// 新增
		function save() {
			$.ajax('customer/save', {
				type: 'post',
				contentType: 'application/json',
				data: JSON.stringify({
					owner: 	$('#create-owner').val(),
					name: $('#create-name').val(),
					phone: $('#create-phone').val(),
					website: $('#create-website').val(),
					description: $('#create-description').val(),
					contactSummary: $('#create-contactSummary').val(),
					nextContactTime: $('#create-nextContactTime').val(),
					address: $('#create-address').val(),
				}),
				beforeSend: function () {
					var name = $('#create-name').val();
					if (!name) {
						alert("未填写客户公司名称");
						return false;
					}
				},
				success: function (res) {
					if (res.code == 0) {
						alert("新增成功");
						$('#tab').bootstrapTable('refresh');
						$('#saveWindow').modal('hide');

					} else {
						alert(res.message);
					}
				}
			})
		}

		// 打开修改
		function openEdit(id) {
			$.ajax('customer/find/' + id, {
				type: 'get',
				success: function (res) {
					if (res.code == 0) {
						$('#edit-id').val(res.data.id),
								$('#edit-owner').val(res.data.owner),
								$('#edit-name').val(res.data.name),
								$('#edit-phone').val(res.data.phone),
								$('#edit-website').val(res.data.website),
								$('#edit-description').val(res.data.description),
								$('#edit-contactSummary').val(res.data.contactSummary),
								$('#edit-nextContactTime').val(res.data.nextContactTime),
								$('#edit-address').val(res.data.address),
								// 打开窗体
								$('#editCustomerModal').modal('show');
					}
				}
			})
		}

		// 修改
		function edit() {
			$.ajax('customer/edit', {
				type: 'put',
				contentType: 'application/json',
				data: JSON.stringify({
					id: $('#edit-id').val(),
					owner: 	$('#edit-owner').val(),
					name: $('#edit-name').val(),
					phone: $('#edit-phone').val(),
					website: $('#edit-website').val(),
					description: $('#edit-description').val(),
					contactSummary: $('#edit-contactSummary').val(),
					nextContactTime: $('#edit-nextContactTime').val(),
					address: $('#edit-address').val(),
				}),
				beforeSend: function () {
					var name = $('#edit-name').val();
					if (!name) {
						alert("未填写客户公司名称");
						return false;
					}
				},
				success: function (res) {
					if (res.code == 0) {
						alert("修改成功");
						$('#tab').bootstrapTable('refresh');
						$('#editCustomerModal').modal('hide');

					} else {
						alert(res.message);
					}
				}
			})
		}

		// 删除
		function remove(id) {
			if (confirm("确定要删除该条数据吗?")) {
				$.ajax('customer/delete/' + id, {
					type: 'delete',
					success: function (res) {
						if (res.code == 0) {
							alert("删除成功");
							// 刷新页面
							$('#tab').bootstrapTable('refresh');
						} else {
							alert(res.message);
						}
					}
				})
			}
		}

		// 批量删除
		function removeBatch() {
			//获取用户的选择
			var rows = $('#tab').bootstrapTable('getSelections');
			if (rows.length == 0) {
				alert("请选择要删除的数据");
			} else {
				if (!confirm("确定要删除数据吗?")) {
					return;
				}
				var ids = [];
				$.each(rows, function () {
					ids.push(this.id);
				})
				$.ajax('customer/delete', {
					type: 'post',
					data: {
						_method: 'delete',
						ids: ids.join()
					},
					success: function (res) {
						if (res.code == 0) {
							alert("删除成功");
							// 刷新页面
							$('#tab').bootstrapTable('refresh');
						} else {
							alert(res.message);
						}
					}
				})
			}
		}

		// 加载关联信息 初始化下拉列表 (所有者)
		function ownerSelect() {
			$.ajax('user/list',{
				type:'get',
				success: function (res) {
					if(res.code == 0){
						var str = '<option value=""></option>';
						$.each(res.data, function () {
							str += '<option value="'+ this.id +'">'+ this.name +'</option>';
						});
						$('.ownerSelect').html(str)
					}
				}
			})
		}
	</script>
</body>
</html>